<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <script src="./js/jquery-2.1.1.js" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript">
            var map; //importante definirla fuera de la funcion initialize() para poderla usar desde otras funciones.

            function initialize() {
                var punto = new google.maps.LatLng(17.22207, -89.6235); //ubicación del Plaza Central de Tikal, Guatemala
                var myOptions = {
                    zoom: 18, //nivel de zoom para poder ver de cerca.
                    center: punto,
                    mapTypeId: google.maps.MapTypeId.SATELLITE //Tipo de mapa inicial, satélite para ver las pirámides
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }

            //copiamos la función de geolocalización del ejemplo anterior.

            function pedirPosicion(pos) {
                var centro = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
                map.setCenter(centro); //pedimos que centre el mapa..
                map.setMapTypeId(google.maps.MapTypeId.ROADMAP); //y lo volvemos un mapa callejero
                alert("¡Hola! Estas en : " + pos.coords.latitude + "," + pos.coords.longitude + " Rango de localización de +/- " + pos.coords.accuracy + " metros");
            }

            function geolocalizame() {
                navigator.geolocation.getCurrentPosition(pedirPosicion);
            }
        </script>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                initialize();
            });
        </script>
        Hello from Facelets
        <p:dataTable value="#{pruebaController.getJson4('http://api.gobiernoabierto.gob.sv/shopping_establishments?&amp;q[latitude_gt]=13.9&amp;q[latitude_lt]=15',
                              'address,city_id,code,created_at,id,latitude,longitude,name,phone,updated_at')}" var="variables">
            <p:column headerText="hola1#{variables.hijos[1].key}">
                <h:outputText value="#{variables.hijos[1].value}"/>
                <h:outputText value="#{variables.hijos[1].key}"/>
            </p:column>
            <p:column headerText="hola2#{variables.hijos[5].key}">
                <h:outputText value="#{variables.hijos[5].value}"/>
                <h:outputText value="#{variables.hijos[5].key}"/>
            </p:column>
            <p:column headerText="hola3#{variables.hijos[6].key}">
                <h:outputText value="#{variables.hijos[6].value}"/>
                <h:outputText value="#{variables.hijos[6].key}"/>
            </p:column>
            <p:column headerText="hola3#{variables.hijos[7].key}">
                <h:outputText value="#{variables.hijos[7].value}"/>
                <h:outputText value="#{variables.hijos[7].key}"/>
            </p:column>
        </p:dataTable>
        <br />
        <h:link outcome="welcomePrimefaces" value="Primefaces welcome page" />
        <div id="map_canvas" style="width:640px ;height:480px"></div>
        <p:commandButton onclick="geolocalizame()"/>
    </h:body>
</html>


